<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.item1{
			grid-area: a;
			align-self: stretch;
		}
		.item2{
			grid-area: b;
		}
		.item3{
			grid-area: c;
		}
		.item4{
			grid-area: d;
			align-self: stretch;
		}
		.grid-container{
			display: grid;
			padding: 10px;
			grid-gap: 0.625rem;
			background-color: pink;
			grid-template-rows: 200px 200px;
			grid-template-areas: 
			'a b b'
			'c c d';
			
			align-items: center;
		}
		.grid-container > div {
			text-align: center;
			background-color: #90EE90;
			padding: 10px;
			border: #FFFFFF 1px solid;
		}
		</style>
	</head>
	<body>
		<div class="grid-container">
			<div class="item1">a</div>
			<div class="item2">b</div>
			<div class="item3">c</div>
			<div class="item4">d</div>
		</div>
	</body>
</html>
